<template>
  <i-biz-tabs
    :class="[
      ns.b(),
      ns.m(modelData.codeName),
      ...controller.containerClass,
    ]"
    v-model="tab"
  >
    <template v-for="child in modelData.panelTabPages" :key="child.id">
      <!-- 不显示且不用保活时直接不绘制 -->
      <block
        v-if="!(!container.panelItems[child.id].state.visible && !container.panelItems[child.id].state.keepAlive)"
      >
        <i-biz-tab
          :class="ns.b('tab-item')"
          :title="container.panelItems[child.id].model.caption"
          :name="container.panelItems[child.id].model.id"
        >
          <i-biz-panel-detail-shell
            :modelData="child"
            :container="container"
            :controls="controls"
          />
        </i-biz-tab>
      </block>
    </template>
  </i-biz-tabs>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { IControl, IPanelTabPanel } from "@ibiz/model-core";
import { PropType, ref } from "vue";
import { IViewLayoutPanelController, PanelItemController } from "@ibiz-template/runtime";
import { useNamespace } from "@/use";
const ns = useNamespace("panel-tab-panel");
// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelTabPanel>,
    required: true,
  },
  container: {
    type: Object as PropType<IViewLayoutPanelController>,
    required: true,
  },
  controls: {
    type: Array as PropType<
      {
        modelData: IControl;
        slotProps: IData;
      }[]
    >,
    default: () => [],
  },
  controller: {
    type: PanelItemController,
    required: true,
  },
});

const tab = ref<number | string>(props.modelData.panelTabPages?.[0].id!);

</script>
<style lang="scss" scoped>
@import './i-biz-panel-tab-panel.scss';
</style>